<template>
  <div class="sync_rule">
    <h1 class="title1">浏览器扩展</h1>
    <div class="content flex">
      <div class="chromeCard" @click="download">
        <div>
          <img src="../../../assets/images/chrome.adcdeb82.png" alt="" />
        </div>
        <div>Chrome</div>
      </div>
      <!-- <div class="chromeCard">
        <div>
          <img src="../../../assets/images/edge.d02716f7.png" alt="" />
        </div>
        <div>Edge</div>
      </div> -->
    </div>
    <h1 class="title1">安装教程</h1>
    <div class="content" style="max-height:560px;overflow:auto">
      <div><img src="../../../assets/images/teach_step1.png" alt=""></div>
      <div><img src="../../../assets/images/teach_step2.png" alt=""></div>
      <div><img src="../../../assets/images/teach_step3.png" alt=""></div>
      <div><img src="../../../assets/images/teach_step4.png" alt=""></div>
      <div><img src="../../../assets/images/teach_step5.png" alt=""></div>
    </div>
  </div>
</template>

<script setup>
const download = () => {
  let a = document.createElement('a')
  a.href = "http://localhost:23108/images/chrome.zip"
  a.click()
}
</script>

<style lang="scss" scoped>
.sync_rule {
  width: 60%;
}
.title1 {
  margin-bottom: 25px;
  font-size: 17px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.content {
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 25px;
}
.chromeCard {
  width: 100px;
  height: 100px;
  border: 1px solid #ece6e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    transform: translateY(-8px);
    transition: all .3s ease;
  }
  img {
    width: 60px;
    height: 60px;
  }
}
</style>